﻿<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" class="hb-loaded">
<head></head>
<body>
<link th:href="@{/css/shopping.css}" type="text/css" rel="stylesheet"/>
<script th:src="@{/js/jquery.js}" type="text/javascript"></script>
<script th:src="@{/js/shoppcart.js}" type="text/javascript"></script>
<title>购物车</title>
<iframe src="javascript:false;" style="display: none;"></iframe>
<form id="aspnetForm" th:action="@{/dr_mall/drCart/loadCartAgreement}" method="post" name="aspnetForm">
    <!--全部背景-->
    <div class="all-thing">
        <!--中间内容-->
        <div class="tcmain">
            <!--头部-->
            <div class="shop_top">
                <div class="shopt_left fl">
                    <a title="Darry Ring" th:href="@{/index.html}">
                        <img width="186" height="42" th:src="@{/images/dr.png}"/>
                    </a>
                    <span>求婚钻戒领导品牌</span>
                </div>
                <div class="shopt_right fr">
                    <span id="ctl00_ltlUname">你好！KLNgOk</span>
                    <a class="my_dr" href="http://192.168.6.100:8081/login.html">我的DR</a>
                    <a onClick="javascript:logout()" class="tc_dr" href="#">退出</a>
                    <a class="help_dr" href="help.html">帮助中心</a>
                </div>
            </div>
            <!--头部end-->
            <!--导航条-->
            <div class="shop_nav" id="ctl00_showNav"></div>
            <!--导航条end-->

            <script type="text/javascript">
                function deleteCart(t) {
                    if (confirm("确认删除？")) {
                        let cid = $(t).data('id');
                        location.href = "del/" + cid;
                    }
                }

                function clearCart() {
                    if (confirm("确认清除？")) {
                        location.href = "clearCart";
                    }
                }

                function toPay() {
                    //获取被选中的购物车的id
                    $("#aspnetForm").submit();
                }

                function toDetail(t) {
                    let pid = $(t).data('pid');
                    console.log(pid);
                    location.href = "/index/detail1";
                }
            </script>
            <!--内容-->
            <div class="shop_cort">
                <!--左边-->
                <div class="shop_cort-left fl">
                    <h3>查看我的购物车</h3>
                    <!--购物车-->
                    <table cellspacing="0" cellpadding="0" border="0" class="shop_tabble">
                        <tbody>
                        <tr class="nav_tr">
                            <td style="width: 50px"><input type="checkbox" id="selAll"></td>
                            <td style="width:240px" class="sp_td">商品图片</td>
                            <td style="width:100px" class="cz_td">商品名称</td>
                            <td style="width:100px" class="sc_td">规格型号</td>
                            <td class="gm_td">购买价</td>
                            <td style="width:100px" class="kz_td">操作</td>
                        </tr>
                        <tr class="cp_tr" th:each="cart : ${carts}">
                            <td class="kz_td">
                                <input type="checkbox" class="cartIds" th:if="${cart.checked eq 'y'}" checked
                                       th:value="${cart.id}" name="cartId">
                                <input type="checkbox" class="cartIds" th:if="${cart.checked eq 'n'}"
                                       th:value="${cart.id}" name="cartId">
                            </td>
                            <td class="sp_td"><a href="javascript:void(0)" th:attr="data-pid=${cart.skus.products.id}"
                                                 onclick="toDetail(this)" class="jx_shop">
                                <img width="85" height="85" th:src="|/${cart.skus.products.picture.image}|"></a></td>
                            <td class="cz_td" th:text="${cart.skus.products.name}">18K白金</td>
                            <td class="sc_td" th:text="${cart.skus.specVal}">7</td>
                            <td style="font-family:微软雅黑" class="gm_td" th:text="${cart.price}">￥10,800</td>
                            <td class="close_td">
                                <a href="javascript:void(0)" th:attr="data-id=${cart.id}"
                                   onClick="deleteCart(this)"><span
                                        class="sicon s_close"></span></a>
                        </tr>
                        </tbody>
                    </table>
                    <!--购物车end-->
                    <!--结算-->
                    <div class="shop_js">
                        <a class="jx_shop" th:href="@{/index.html}">继续购物</a>
                        <a class="qk_shop" href="JavaScript:void(0)" onclick="clearCart()">清空购物车</a>
                        <span>你购买了<i id="count">1</i>件商品</span>
                        <span>总计：<i style="font-family:微软雅黑" class="fw_bold" id="totalPrice">10,800</i>￥</span>
                        <span onClick="toPay();" class="end_bt"><em>立即结算</em></span>
                    </div>
                    <!--结算end-->
                </div>
                <!--左边end-->
                <!--右边-->
                <!--右边-->
                <div class="shop_cort-right fr">
                    <div class="shop_right-nr">
                        <h3>购物帮助指南</h3>
                        <div class="shop_right-zx line_bottom">
                            <p class="shop_lx">24小时在线客服</p>
                            <p class="shop_tel">400-01-13520</p>
                        </div>
                        <div class="shop_right-zf line_bottom">
                            <h4>支付安全保障</h4>
                            <p>安全支付系统采用SSL加密。</p>
                            <ul class="shop_right-ul">
                                <li class="shop_cor-yl"></li>
                                <li class="shop_cor-cft"></li>
                                <li class="shop_cor-zf"></li>
                            </ul>
                        </div>
                        <div class="shop_right-ps">
                            <h4>全球配送</h4>
                            <p class="shop_kd">支持全球配送,店铺取货</p>
                            <p class="shop_bj">全程保价 无风险</p>
                        </div>
                    </div>
                </div>
                <!--右边end-->
                <!--右边end-->
            </div>
            <!--底部-->
            <div class="cmain shop_foot">
                <p>Copyright &copy; 2006-2015 www.darryring.com 戴瑞珠宝 All Rights Reserved. 粤ICP备11012085号</p>
                <p>中国互联网违法信息举报中心 | 中国公安网络110报警服务 | 本网站提供所售商品的正式发票</p>
                <div class="shop_foot-img">
                    <img th:src="@{/images/db.jpg}"/>
                </div>
            </div>
            <!--底部end-->
        </div>
        <!--全部背景end-->
    </div>
    <script type="text/javascript">
        function logout() {
            if (window.confirm('确定退出吗？')) {
                // $.get("/nAPI/QuitExit.ashx", function (data) {
                //     window.location.href = "/";
                // });
            }
        }
    </script>

</form>
<script>
    //做全选操作
    $(function () {
        calculation();
        viewStatus();
        $("#selAll").click(function () {
            $(".cartIds").prop("checked", $(this).prop("checked"));
            //计算商品价格和购买数量
            calculation();
        });
        $(".cartIds").click(function () {
            calculation();
            viewStatus();
        });
    });

    function viewStatus() {
        if ($(".cartIds").length == $(".cartIds:checked").length) {
            $("#selAll").prop("indeterminate", false);
            $("#selAll").prop("checked", true);
        } else if ($(".cartIds:checked").length == 0) {
            $("#selAll").prop("indeterminate", false);
            $("#selAll").prop("checked", false);
        } else {
            $("#selAll").prop("checked", false);
            $("#selAll").prop("indeterminate", true);
        }
    }

    function calculation() {
        // 总价
        let total = 0;
        //选中的商品的数量
        let count = 0;
        count = $(".cartIds:checked").length;
        $(".cartIds:checked").each(function () {
            //找到当前点击的商品的价格
            let oneProductPrice = $(this).parent().next().next().next().next();
            //计算被选中的商品的价格
            total += Number(oneProductPrice.text());
        });
        //替换商品总价
        $("#totalPrice").text(total.toFixed(2));
        //替换购买的商品数量
        $("#count").text(count);
    }
</script>
</body>
</html>